<template>
  <div class="login-container">
    <van-nav-bar title="登录">
      <template #left>
        <img class="logo" src="@/assets/images/logo.png"/>
      </template>
    </van-nav-bar>
     <van-form @submit="onSubmitFn">
      <van-field
        v-model="formLogin.mobile"
        type="tel"
        label="手机号"
        placeholder="请输入手机号"
        required
        :rules="[{ required: true, message: '请填写手机号', trigger: 'onChange', pattern: /^1[3456789]\d{9}$/  }]"
      />
      <van-field
        v-model="formLogin.code"
        type="password"
        label="密码"
        placeholder="请输入密码"
        required
        :rules="[{ required: true, message: '请填写密码', trigger: 'onChange', pattern: /^\d{6}$/ }]"
      />
      <div style="margin: 16px;">
        <van-button round :loading='isLoading' block type="info" native-type="submit" loading-text="加载中...">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>

// 按需导入
// import { loginAPI } from '../../api/login'
import { Notify } from 'vant'
import { mapActions } from 'vuex'

export default {
  name: 'Login',
  data () {
    return {
      // 校验规则
      // rules: {
      //   tel: [
      //     {
      //       // 必填
      //       required: true,
      //       message: '请输入正确手机号',
      //       trigger: 'onchange'
      //     },
      //     {
      //       // 合法
      //       pattern: /^1[3456789]\d{9}$/,
      //       message: '请输入正确手机号',
      //       trigger: 'onChenge'
      //     }
      //   ],
      //   password: [
      //     // 必填 合法
      //   ]
      // }
      // 登录按钮的加载状态，false表示没有加载，true表示加载中
      isLoading: false,
      // 登录表单数据
      formLogin: {
        mobile: '13888880909',
        code: '246810' // 默认只能用246810后台规定了
      }
    }
  },
  methods: {
    ...mapActions(['asyLoginAction']),
    // 登录按钮提交事件 只有所有数据通过校验才会执行事件
    async onSubmitFn () {
      // 状态为加载中
      // try catch finally 手动捕获错误
      // try 捕获成功 .then
      // catch 捕获错误
      // finally 无论成功失败都会执行
      this.isLoading = true
      try {
        await this.asyLoginAction(this.formLogin)
        // console.log('登录成功')
        // 把手机号和验证码给后台发送请求
        // const resp = await loginAPI(this.formLogin)
        // 请求完毕，状态为加载完毕
        // console.log(resp)
        Notify({ type: 'success', message: '登录成功' })
        // 跳转路由  获取的时候用route
        // replace 不会回退返回
        // push 可以回退返回
        // 登录成功后，跳转到首页，有重定向，所以直接显示home页面
        this.$router.replace({
          // 登录成功，如果有form表示从这个路径调过来，那么就要让登录成功去这个地址，否则就去首页
          path: this.$route.query.from || '/layout'
        })
      } catch (err) {
        Notify({ type: 'warning', message: '手机号或密码错误' })
      } finally {
        // 这里不管登录成功还是失败，都要将按钮解禁
        this.isLoading = false
      }
    }
  }

}
</script>

<style scoped lang="less">
.logo {
    width: 100px;
    height: 30px;
}
// .van-nav-bar {
//    background: #007bff;
// }

// /* /deep/ 就是把data-v-hash值选择器写到类名的前面 */
// /deep/ .van-nav-bar__title{
//   color: white;
// }
</style>
